<template>
  <el-dialog
      v-model="dialogVisible"
      title="作废发票"
      width="20%"
      :before-close="handleClose"
  >
    <div class="content">
      <el-input
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="请输入作废原因"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" class="button_cancel2">取消</el-button>
        <el-button type="primary" @click="onConfirm" class="button_view">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,watch} from "vue";
import {useRouter} from "vue-router";
import {ElDialog,ElMessage} from "element-plus";
import {invoiceApi} from "@/api/lease";

const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  form:{
    type:Object,
    default: {}
  }
});
const textarea = ref('');
let emits = defineEmits(['update:visible','onConfirm'])
const dialogVisible = ref(props.visible);

const handleClose = () => {
  // 需要修改父组件的数据
  emits('update:visible',false);
}

const router = useRouter();
const contractId = router.currentRoute.value.params.contractId;
const onConfirm = () => {
  if(textarea.value.trim()===''){
    ElMessage.warning('作废原因必填!');
    return;
  }
  invoiceApi.cancelInvoice({
    businessId:props.form.invoiceId,
    reason:textarea.value
  }).then(res=>{
    if(res.code == 200){
      ElMessage.success('作废成功!');
      handleClose();
      emits('onConfirm');
    }
  });
}

// 监听visible的变化 只能监听第一次的变化
watch(()=> props.visible, value => {
  dialogVisible.value = value;
})

// 监听组件内部的dialogVisible变化
watch(() => dialogVisible.value, value => {
  emits('update:visible', value)
})
</script>
